<template>
<div style="background-color: #fff;height: 89.8vh;">

  <div id="tool">
    <el-button type="success" @click="newButton">新增</el-button>
    <el-button @click="batchRemove" type="danger">批量删除</el-button>
    <el-button @click="showUpload" type="primary" >导入</el-button>
    <el-button @click="batchOut"  type="primary">导出</el-button>
    <el-divider>
      <el-icon><Search /></el-icon>
    </el-divider>
    <el-row>
      <el-col style="text-align: center" :span="1">账户</el-col>
      <el-col :span="4">
        <el-input v-model="searchForm.userAccount" />
      </el-col>
      <el-col style="text-align: center" :span="2">用户名</el-col>
      <el-col :span="4">
        <el-input v-model="searchForm.userName" />
      </el-col>
      <el-col style="text-align: center" :span="2">联系方式</el-col>
      <el-col :span="4">
        <el-input v-model="searchForm.userPhone" />
      </el-col>
      <el-col style="text-align: center" :span="1">邮箱</el-col>
      <el-col :span="4">
        <el-input v-model="searchForm.userEmail" />
      </el-col>

      <el-col style="text-align: center" :span="2">
        <el-button @click="search" type="primary">搜索</el-button>
      </el-col>
    </el-row>
    <el-divider>
      <el-icon><Document /></el-icon>
    </el-divider>
  </div>
  <el-table ref="userTable" :data="userData" stripe>
    <el-table-column type="selection" width="55" />
    <el-table-column prop="userNo" label="用户编号"  align="center"/>
    <el-table-column prop="userAccount" label="账户" align="center" />
    <el-table-column prop="userPassword" label="密码" align="center" />
    <el-table-column prop="userName" label="用户名" align="center" />
    <el-table-column prop="userPhone" label="联系方式" align="center" />
    <el-table-column prop="userEmail" label="邮箱" align="center" />
    <el-table-column prop="userIp" label="登录ip" align="center" />
    <el-table-column prop="userLoginDate" label="最后一次登录时间" align="center" />
    <el-table-column label="操作" width="230" align="center">
      <template #default="scope">
        <el-button @click="updateButton(scope.row)" type="warning">修改</el-button>
        <el-button @click="removeButton(scope.row.userNo)" type="danger">删除</el-button>
        <el-button @click="showRole(scope.row.userNo)" type="primary" >角色</el-button>
      </template>
    </el-table-column>
  </el-table>
<paging @init="loadTable" v-model:count="count"  v-model:limit="limit"  v-model:page="page"></paging>
</div>
  <el-dialog draggable v-model="userFormDisplay">
    <user-form @submitUserForm="submitUserForm" @closeUserForm="closeUserForm" ref="UserFormView"></user-form>
  </el-dialog>
  <el-dialog draggable v-model="roleDisplay">
    <el-transfer
        :props="{
      key: 'roleNo',
      label: 'roleName',
    }"
        :titles="['全部权限', '现有权限']"
        v-model="checkedRole" :data="roleData" >
      <template #right-footer>
        <el-button @click="saveRole">保存</el-button>
      </template>
    </el-transfer>
  </el-dialog>
  <el-dialog draggable v-model="uploadDisplay">
    <upload @batchImport="batchImportUser"></upload>
  </el-dialog>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {
  addUserRole,
  batchAddUser,
  batchOutUser,
  batchRemoveUser,
  getAllUser,
  getUserRole,
  removeUser,
  searchUser
} from "../../../request/system/api.js";
import {Document, Search} from "@element-plus/icons-vue";
import UserForm from "../../../components/form/system/userForm.vue";
import {ElMessage} from "element-plus";
import Paging from "../../../components/Paging.vue";
const UserFormView=ref()
const userData=ref([])
const page=ref(1)
const limit=ref(10)
const count=ref(0)
const userFormDisplay=ref(true);
const userTable=ref()
import moment from "moment"
import Upload from "../../../components/upload.vue";
import {getAllPower} from "../../../request/system/PowerApi.js";
import {addRolePower, getAllRole, getRolePower} from "../../../request/system/RoleApi.js";
const uploadDisplay=ref(true)
const searchForm =reactive({
  userAccount:'',
  page:page.value,
  userName:'',
  userPhone:'',
  userEmail:'',
  limit:limit.value
})
const roleData=ref([])
const checkedUser=ref()
const checkedRole=ref([])

const roleDisplay=ref(false)
const showUpload=()=>{
  uploadDisplay.value=true
}
const loadTable=(newPage,newLimit)=>{
  page.value=newPage
  limit.value=newLimit
  searchForm.page=newPage
  searchForm.limit=newLimit;
  if(searchForm.userAccount==""&&searchForm.userName==""&&searchForm.userPhone==""&&searchForm.userEmail==""){
    init()
  }else {
    search()
  }
}
const showRole=(id)=>{
  roleDisplay.value=true;
  checkedUser.value=id
  getUserRole(id).then(response=>{
    for (let i=0;i<response.data.length;i++){
      checkedRole.value.push(response.data[i].role)
    }
  })
}
const saveRole = () => {
  addUserRole(checkedUser.value,checkedRole.value).then(response=>{
    if(response.state==="200"){
      ElMessage.success("保存成功")
      roleDisplay.value=false;checkedRole.value=[]
    }
  })
}
const search=()=>{
  searchUser(searchForm).then((response)=>{
    userData.value=response.data
    count.value=response.count
  })
}
const batchImportUser=(files)=>{
  batchAddUser({"userArray":files}).then((response)=>{
    if(response.state=="200"){
      ElMessage.success("导入成功")
      init();
      uploadDisplay.value=false;
    }
  })
}
const batchOut=()=>{
  let rows=userTable.value.getSelectionRows()
  if(rows.length>0){
    for (let i = 0; i < rows.length; i++) {
      rows[i]=JSON.stringify(rows[i])
    }

    batchOutUser({userArray:rows}).then((response)=>{
      const url = window.URL.createObjectURL(new Blob([response]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', '用户信息:'+ moment(new Date()).format("yyyy-MM-DD-HH-mm-ss")+'.xls'); // 指定下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
      ElMessage.success("导出成功")
    })
  }else {
    ElMessage.warning("请最少选中一行")
  }
}
const batchRemove=()=>{
  let rows=userTable.value.getSelectionRows()
  if( rows.length>0){
    let id=""
    for (let i = 0; i < rows.length; i++) {
    id+=rows[i].userNo+","
      console.log(id)

    }
    id=id.substring(0,id.length-1)
    batchRemoveUser(id).then((response)=>{
      if(response.state=="200"){
        ElMessage.success("删除成功")
        init()
      }
    })
  }else {
    ElMessage.warning("请最少选中一行")
  }
}
const init=()=>{
  getAllUser(page.value,limit.value).then(response=>{
  userData.value=response.data
    count.value=response.count
  })
  getAllRole(1,1000).then(response=>{
    roleData.value=response.data
  })
}
const removeButton=(userNo)=>{
  removeUser(userNo).then((response)=>{
    if(response.state=="200"){
      ElMessage.success("删除成功")
      init()
    }
  })
}
const updateButton=(row)=>{
  userFormDisplay.value=true;
  UserFormView.value.fillForm(row)
}
const submitUserForm=()=>{
  userFormDisplay.value=false;
  init()
}
const closeUserForm=()=>{
  userFormDisplay.value=false;
}
const newButton=()=>{
  userFormDisplay.value=true;
  UserFormView.value.rest(true)


}
onMounted(()=>{
  userFormDisplay.value=false
  uploadDisplay.value=false
  init();
})
</script>
<style scoped>
#tool{
  background-color: #fff;
  padding: 10px;
}
</style>